<template>
  <base-breadcrumb>
    <!-- 发卡面额设置 -->
    <div>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <a-button v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_034_add_01'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_034_add_01'
                      }
              ]" class="mb12" icon="plus" type="primary" @click="handleManage(0)" v-if="hideBuquBtn()">新增</a-button>
        <list-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :isScrollX="false"
          :alert="true"
          :showPage="false"
        >
          <!-- 编辑 -->
          <span slot="action" slot-scope="text, record">
            <a v-btnPermission="
            [
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_034_edi_02'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_034_edi_02'
                      }
              ]" @click="handleManage(1, record)" v-if="hideBuquBtn()">编辑</a>
          </span>
          <!-- 状态 -->
          <template slot="statusCode" slot-scope="text, record">
            <status-display :statusCode="record.statusCode" :statusMap="statusMap"></status-display>
          </template>
        </list-table>
      </a-card>
      <!-- 表单弹窗 -->
      <dialog-form
        ref="dialogForm"
        :visible.sync="visible"
        editModel="E"
        :api="editModel != 0 ? api : null"
        :form="form"
        headerTitle="发卡面额设置"
        :width="800"
        :rules="rules"
        :formList="formList"
        @confirm="submitForm"
      ></dialog-form>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import DialogForm from '@/components/DialogForm' // 表单弹窗
import { label } from '@/api/quality/quality' // api
import StatusDisplay from '@/components/StatusDisplay'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width:100,
    customRender(){
      return arguments[2] + 1
    }
  },
  {
    title: '面额（元）',
    ellipsis: true,
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'statusCode',
    scopedSlots: { customRender: 'statusCode' },
    width: 200,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
    name:'a'+Date.now(),  components: {
    STable,
    DialogForm,
    StatusDisplay,
  },
  data() {
    this.columns = columns
    return {
      statusMap: {
        0: {
          label: '不可用', // 文本
          color: '#FE5500', // 字体色彩
        },
        1: {
          label: '可用',
          color: '#00A854',
        },
      }, // 状态枚举表
      rules: {
        name: [{ required: true, message: '请输入面额（元）', trigger: 'change' }],
        statusCode: [{ required: true, message: '请选择可用状态', trigger: 'change' }],
      }, // 校验规则
      formList: [
        {
          type: 'a-input-number',
          span: 12,
          precision: 2,
          label: '面额（元）',
          keyName: 'name',
          attrs: {
            max: 1000000000,
            min: 0,
          },
        },
        {
          type: 'a-select',
          span: 12,
          label: '是否可用',
          keyName: 'statusCode',
          viewName: 'statusName',
          data: [
            {
              value: '0',
              label: '不可用',
            },
            {
              value: '1',
              label: '可用',
            },
          ],
        },
      ], // 表单列表
      visible: false, // 表单弹窗显隐控件
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return label.getList({type:'30'}).then((res) => {
          if (res) {
            return res
          }
        })
      },
      editModel: 0,
      api: label,
      form: {}, // 表单参数
    }
  },
  methods: {
    /**
     * 操作栏 type:0 新增;1 编辑
     */
    handleManage(type, record) {
      this.editModel = type // 映射操作类型
      this.form = type == 1 ? this.$clone(record) : {} // 配置参数
      this.visible = true // 打开表单
    },
    /**
     * 提交表单
     */
    submitForm(form) {
      let that = this
      let name = ['create', 'update'][that.editModel] // 根据操作切换url地址
      that.$refs.dialogForm.loading = true
      // 新增的时候没有type，加上标识
      !form.type && (form.type = '30')
      // 提交表单
      label[name](form)
        .then((res) => {
          that.$refs.dialogForm.loading = false
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false
          that.$refs.table.refresh(true)
        })
        .catch((res) => {
          // that.$message.warning(['添加', '编辑'][that.editModel] + '失败！')
          that.$refs.dialogForm.loading = false
        })
    },
  },
}
</script>
